
<template>
    <view class="sellerBid">
        <view class="bidList_entire">
            <view class="bidList_images">
                <image src="{{detail.topicImage }}" mode="aspectFit" style="height: 200px"></image>
            </view>
            <view style="text-align: center;">{{detail.name}}</view>
            <view class="bidList_flex">
                <view class="bidList_flex1 backf5f5f9">
                    <text>卖家最低售价</text>
                    <view class="border-right" style="background: #fff"></view>
                </view>
                <view class="bidList_flex2 backf5f5f9">
                    <view class="bidList_pire">￥
                        <text>{{detail.minSellerOfferAmount}}</text>
                    </view>
                </view>
                <view class="bidList_flex3 backe6e6e6">
                    <text>买家最高出价</text>
                    <view class="border-right" style="background: #fff"></view>
                </view>
                <view class="bidList_flex4 backe6e6e6">
                    <view class="bidList_pire">￥
                        <text>{{detail.maxBuyerOfferAmount}}</text>
                    </view>
                </view>
            </view>
            <!-- 出价列表 -->
            <view class="sellerBid_list">
                <view class="list_styleOne">
                    <view class="list_styleOne_fix">
                        <view>我要出价</view>
                        <view class="list_styleOne_shuru">
                            <text>￥</text>
                            <input type="text" bindinput="getDdPrice">
                        </view>
                    </view>
                    <view class="youAreNot" wx:if="{{checkAmount}}">您的出价不是最低出价</view>
                </view>
                <view class="list_styleTo">
                    <view class="list_styleTo_fix">
                        <view>需支付担保金</view>
                        <view class="list_styleTo_sum">￥{{dbPrice}}</view>
                    </view>
                </view>
                <view class="list_styleOne">
                    <view class="list_styleOne_fix">
                        <view>服务费（{{fwPrice*100}}%）<text style="text-decoration: line-through;color: #999;">4%</text></view>
                        <view class="list_styleOne_shuru">￥{{fwOl}}</view>
                    </view>
                </view>
                <view class="list_styleTo">
                    <view class="list_styleTo_fix">
                        <view>预计收入</view>
                        <view class="list_styleTo_sum">￥{{yjPrice}}</view>
                    </view>
                </view>
            </view>
            <!-- 出价列表 end-->
            <!-- 使用优惠券 -->
            <view class="useDiscounts">
                <navigator url="/pages/personalCenter/coupons?type=FREE_BOND" wx:if="{{!hasCou}}">
                    <checkbox-group class="useDiscounts_one" bindchange="change">
                        <checkbox wx:if="{{!changeCou}}" checked="{{changeCou}}"/>
                        <checkbox wx:if="{{changeCou}}" checked="{{!changeCou}}"/>
                    </checkbox-group>
                    <text class="useDiscounts_one_text">使用优惠券</text>
                </navigator>
                <view wx:if="{{hasCou}}">
                    <checkbox-group class="useDiscounts_to" bindchange="change">
                        <checkbox checked="{{hasCou}}"/>
                    </checkbox-group>
                    <view class="useDiscounts_to_text" wx:if="{{getCoupon.couponType == '现金优惠'}}">
                        使用{{getCoupon.couponType}}劵 ，可用余额：<text class="shareColor">{{getCoupon.couponAmount}}</text>元
                    </view>
                    <view class="useDiscounts_to_text" wx:if="{{getCoupon.couponType != '现金优惠'}}">
                        使用{{getCoupon.couponType}}劵
                    </view>
                </view>
            </view>
            <!-- 使用优惠券 end -->
            <view class="ord_site" wx:if="{{address}}" @tap="urlTo('/pages/common/address?type=sellerBid')">
                <view class="ord_site_list">
                    <view class="ord_site_h4">商品退回地址<i class="iconfont icon-jiantou fr"></i></view>
                    <view>
                        <text class="fl">收货人:</text>
                        <text style="margin-left: 10px;">{{address.name}}</text>
                    </view>
                    <view>{{address.provinceName+address.cityName+address.areaName+address.address}}</view>
                    <view class="ord_site_p">商品不符合平台检验标准是，将快递到付寄还给您</view>
                </view>
            </view>
            <view class="ord_site" wx:else @tap="urlTo('/pages/common/address?type=sellerBid')">
                <view class="ord_site_list">
                    <view class="ord_site_h4">填写商品回寄地址<i class="iconfont icon-jiantou fr"></i></view>
                    <view>
                        <text class="fl"></text>
                        <text class="fr"></text>
                    </view>
                    <view></view>
                    <view class="ord_site_p">商品不符合平台检验标准是，将快递到付寄还给您</view>
                </view>
            </view>
            <view class="bidList_flex_sta" style="margin-top: 20rpx;" @tap="urlTo('/pages/bidList/timeLimit')">
                <view class=" back_fff">
                    <text>出价时效性</text>
                </view>
                <view class=" back_fff">
                    <text>{{sxxInfo}}天</text>
                </view>
                <view class=" back_fff icon">
                    <i class="iconfont icon-jiantou"></i>
                </view>
            </view>
            <!-- 用户协议 -->
            <view class="useDiscounts">
                <checkbox-group class="useDiscounts_one" bindchange="changeCheck">
                    <checkbox value="{{checked}}" checked="{{checked}}"/>
                </checkbox-group>
                <view class="useDiscounts_to_text">我已阅读同意
                    <text class="userProtocol" @tap="urlTo('/pages/tj/introSale')">用户协议</text>
                </view>
            </view>
            <!-- 用户协议 end -->
        </view>
        <view style='height:100rpx'></view>
        <view class="pofix">
            <view class="button type_main " @tap="submitForm">提交</view>
        </view>

        <!-- 担保金 start-->
        <view class="cashPledge" wx:if="{{toPayShow}}" bindtap="closeToPayShow">
            <view class="cashPledge_back" catchtap="stopToPayShow">
                <view class="cashPledge_list">
                    <text>支付担保</text>
                    <text style="font-size:60rpx;color:#000">￥{{payOrderInfo.amountBondReal ? payOrderInfo.amountBondReal : 0 }}</text>
                </view>
                <view class="cashPledge_list">
                    <text>请选择支付方式</text>
                </view>
                <view class="cashPledge_list" @tap="wxLogin" style="border-bottom:1px solid #e6e6e6;">
                    <view class="iconWis">
                        <i class="iconfont icon-weixinzhifu2"></i>
                    </view>
                    <text>微信支付</text>
                </view>
                <!--<view class="cashPledge_list" style="margin-bottom: 100rpx;">
                    <view class="iconWis">
                        <i class="iconfont icon-zhifubao"></i>
                    </view>
                    <text>支付宝支付</text>
                </view>-->
            </view>
        </view>
        <!-- 押金 end-->
    </view>

</template>
<script>
import wepy from 'wepy';
import api from '@/api/api';
import tip from '@/utils/tip'
import { GOODSDETAIL , TOPAYSXX, CHOOSECOU} from '@/utils/constant'
export default class payDeposit extends wepy.page {
    config = {  // 配置当前页面
        navigationBarTitleText: '卖家出价',    // 头部标题
    }
    data = {
        detail: '',
        form: {},
        address:'',
        dbPrice:'',
        toPayShow:false,
        sxxInfo:30,
        checkAmount:false,
        checked:true,
        yjPrice:0,
        hasCou:false,
        getCoupon:'',
        fwPrice:0,
        fwOl:0,
        changeCou:false,
        payOrderInfo:''
    }
    onShow() {
        const t = this;
        let detail = wx.getStorageSync(GOODSDETAIL);
        let userId = wx.getStorageSync('userId');
        let sxx = wx.getStorageSync(TOPAYSXX);
        let paId = wx.getStorageSync('purOrderAddressId');
        if (detail) {
            t.detail = detail;
            if (userId) {
                t.form['userId'] = userId;
            }
            if(paId){
                t.addressApi(paId);
            }else {
                t.address = '';
            }
            t.getDdFun();
        }
        if(sxx){
            t.sxxInfo = sxx;
        }
        let coupon = wx.getStorageSync(CHOOSECOU);
        if(coupon){
            t.hasCou = true;
            t.getCoupon = coupon;
        }else {
            t.hasCou = false;
        }
        t.toPayShow = false;
        t.$apply();
    }
    methods = {
        urlTo(url) {
            wx.navigateTo({
                url: url
            })
        },
        //我的出价
        getDdPrice(e) {
            const t = this;
            let v = e.detail.value,
                reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                a = t.detail.minSellerOfferAmount;
            if(a!=0){
                if(v>=a){
                    t.checkAmount = true;
                }else {
                    t.checkAmount = false;
                }
            }
            if(reg.test(v)){
                t.yjPrice = (v -  t.fwPrice * v).toFixed(2);
                t.fwOl = (v * t.fwPrice).toFixed(2);
            }
            t.form['amount'] = v;
        },
        submitForm() {
            const t = this
            t.UpdateOfferFun()
        },
        closeToPayShow(){
            const t = this;
            t.toPayShow = false;
        },
        stopToPayShow(){
            const t = this;
            t.toPayShow = true;
        },
        change(){
            const t = this;
            t.changeCou = t.changeCou ? false : true;
            t.hasCou = false;
            t.getCoupon = '';
            wx.removeStorageSync(CHOOSECOU);
            t.$apply();
        },
        changeCheck(e){
            const t = this
            let c = e.detail.value;
            if (c[0]) {
                t.checked = true
            } else {
                t.checked = false
            }
        }
    }
    /**
     * 获取担保押金
     * @returns {Promise.<void>}
     */
    async getDdFun() {
        const t = this;
        const a = await api.getJfPrice();
        if (a.data.code == 0) {
            t.dbPrice = a.data.data.sallerOfferBond;
            t.fwPrice = a.data.data.service;
            t.$apply();
        } else {
            tip.error(a.data.msg);
        }
    }
    /**
     * 更新出价价格
     * @returns {Promise.<void>}
     */
    async UpdateOfferFun() {
        const t = this;
        let am = t.form['amount'],
        reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if (!am) {
            tip.alert('请输入我的出价');
        }else if(!reg.test(am)){
            tip.alert('我的出价必须为数字金额');
        }else if(!t.address){
            tip.alert('请选择你的回寄地址');
        }else if(!t.checked){
            tip.alert('请同意用户协议');
        }else {
            t.disCreateFun();
        }
    }
    /**
     * 获取地址
     * @returns {Promise.<void>}
     */
    async addressApi(k) {
        const t = this;
        const a = await api.defaultAddress({},t.form['userId']);
        if (a.data.code == 0) {
            let l = a.data.data;
            l.forEach((r)=>{
                if(r.id == k){
                    t.address = r;
                }
            });
            t.$apply();
        } else {
            tip.error(a.data.msg);
        }
    }
    /**
     * 生成支付订单
     * @returns {Promise.<void>}
     */
    async disCreateFun() {
        const t = this;
        let d = {};
        d['userId'] = t.form['userId'];
        d['addressId'] = t.address.id;
        d['amountOffer'] = t.form['amount'];
        d['dayLimit'] = t.sxxInfo;
        d['goodsId'] = t.detail.id;
        d['seller'] = 1;
        d['size'] = t.detail.size;
        if(t.getCoupon&&t.hasCou){
            d.couponId = t.getCoupon.id;
        }
        const a = await api.bondCreate({
            query: d,
            method:'POST'
        });
        if (a.data.code == 0) {
            if(a.data.data.state!=='FINISH'){
                t.toPayShow = true;
                t.payOrderInfo = a.data.data;
                t.$apply();
            }else {
                tip.success('支付成功！！',2000);
                wepy.switchTab({
                    url: '/pages/main/main'
                })
            }
        } else {
            tip.error(a.data.msg);
        }
    }
    // 获取唯一标识openId
    async getmyOpenid(a) {
        const t = this;
        const json = await api.getOpenid({
            query:{}
        },'userId='+t.form['userId']+'&code='+a);
        if (json.data.code == 0) {
            t.toPayFun();
        } else {
            tip.error(json.data.msg);
        }
    }
    // 微信登录
    async wxLogin() {
        const t = this;
        wx.login({
            success: function(res) {
                if (res.code) {
                    t.getmyOpenid(res.code)
                } else {
                    tip.error(res.msg)
                }
            }
        })
    }
    /**
     * 去支付
     * @returns {Promise.<void>}
     */
    async toPayFun() {
        const t = this;
        const a = await api.orderTrade({
            query:{
                userId:t.payOrderInfo.appUserId,
                orderId:t.payOrderInfo.id,
                orderType:'BOND',
                payType:'WX_MINI'
            },
            method:'POST'
        });
        if (a.data.code == 0) {
            // 微信支付
            wx.requestPayment({
                timeStamp: a.data.data.wxpayPamram.timeStamp,
                nonceStr: a.data.data.wxpayPamram.nonceStr,
                package: a.data.data.wxpayPamram.package,
                signType: 'MD5',
                paySign: a.data.data.wxpayPamram.paySign,
                success:function(){
                    tip.success('支付成功！！',2000);
                    wx.removeStorageSync('purOrderAddressId');
                    wx.removeStorageSync(CHOOSECOU);
                    wepy.switchTab({
                        url: "/pages/main/main"
                    });
                }
            })
        } else {
            tip.error(a.data.msg);
        }
    }
}

</script>
<style lang="less">
.sellerBid {
    // 押金 start
    .cashPledge {
        position: fixed;
        bottom: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(51, 51, 51, 0.356);
        z-index: 99;
        .cashPledge_back {
            background: #f5f5f9;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .cashPledge_list {
            text-align: center;
            background: #fff;
            margin-bottom: 20rpx;
            padding: 30rpx 0;

            text {
                vertical-align: middle;
            }
        }
        .iconWis {
            text-align: center;
            width: ~'70rpx';
            display: inline-block;
            vertical-align: middle;
            .icon-weixinzhifu2 {
                color: #3cb034;
            }
            .icon-zhifubao {
                color: #108ee9;
            }
            i {
                font-size: 20px;
            }
        }
    }
    // 押金 end
    .pofix {
        position: fixed;
        bottom: 0;
        width: 100%;
        .btn_to {
            display: flex;
            > view {
                width: 50%;
                font-size: 36rpx;
                height: 95rpx;
                line-height: 95rpx;
                text-align: center;
            }
            > view:first-child {
                background: #ffb025;
                color: #fff;
            }
            > view:last-child {
                background: #fff;
                color: #333;
            }
        }
    }
    > view:first-child {
        margin-top: 0 !important;
    }
    > view {
        margin-top: 20rpx;
    }
    .bidList_entire {
        .bidList_images{
            text-align: center;
        }
        .backf5f5f9 {
            background: #FFA622;
            color: #fff;
        }
        .back_fff {
            background: #fff;
        }
        .backe6e6e6 {
            background: #70B957;
            color: #fff;
        }
        .color_org {
            color: #ffb025;
        }

        .bidList_flex_sta {
            display: flex;
            justify-content: flex-start;
            padding: 20rpx 0;
            background: #fff;
            > view:first-child {
                width: 30%;
                text-align: left;
                text {
                    padding-left: 20rpx;
                }
            }
            > view:nth-child(2) {
                padding-left: 40rpx;
            }
            > view:last-child {
                margin-left: auto;
                width: 10%;
                text-align: center;
            }
        }
        .bidList_flex {
            display: flex;
            justify-content: flex-start;
            padding-bottom: 20rpx;
            background: #fff;
            .bidList_flex1 {
                width: 30%;
                overflow: hidden;
                padding: 20rpx 0;
                position: relative;
                text {
                    padding-left: 20rpx;
                }
                .border-right {
                    position: absolute;
                    top: 4rpx;
                    right: 0;
                    width: 2rpx;
                    height: 80rpx;
                }
            }
            .bidList_flex2 {
                width: 20%;
                text-align: right;
                padding: 20rpx 0;
                .bidList_pire {
                    font-size: 22rpx;
                    color: #fff;
                    text {
                        padding-right: 20rpx;
                        font-size: 30rpx;
                    }
                }
            }
            .bidList_flex3 {
                width: 30%;
                position: relative;
                padding: 20rpx 0;
                .modification {
                    text-align: right;
                    view:first-child {
                        width: 50rpx;
                        height: 50rpx;
                    }
                    view {
                        display: inline-block;
                        i {
                            vertical-align: middle;
                            font-size: 36rpx;
                            padding-right: 10rpx;
                        }
                        text {
                            padding-left: 0;
                            vertical-align: middle;
                            display: inline-block;
                        }
                    }
                }
                text {
                    padding-left: 20rpx;
                }
                .border-right {
                    position: absolute;
                    top: 4rpx;
                    right: 0;
                    width: 2rpx;
                    height: 80rpx;
                    color: #fff;
                }
            }
            .bidList_flex4 {
                width: 20%;
                text-align: center;
                padding: 20rpx 0;
                .bidList_pire {
                    font-size: 22rpx;
                    color: #fff;
                    text {
                        font-size: 30rpx;
                    }
                }
                .modification {
                    view:first-child {
                        width: 50rpx;
                        height: 50rpx;
                    }
                    view {
                        display: inline-block;
                        i {
                            vertical-align: middle;
                            font-size: 32rpx;
                            padding-right: 10rpx;
                        }
                        text {
                            padding-left: 0;
                            vertical-align: middle;
                            display: inline-block;
                        }
                    }
                }
            }
        }
    }
    .sellerBid_list {
        background: #fff;
        padding-right: 20rpx;
        margin-top: 20rpx;
        > view {
            margin-left: 20rpx;
        }
        .list_styleOne {
            border-bottom: 1rpx solid #e6e6e6;
            padding: 20rpx 0;
        }
        .list_styleOne_fix {
            display: flex;
            .list_styleOne_shuru {
                margin-left: auto;
                text {
                    display: inline-block;
                    vertical-align: middle;
                }
                input {
                    display: inline-block;
                    vertical-align: middle;
                    background: #e6e6e6;
                    width: 200rpx;
                }
            }
        }
        .youAreNot {
            font-size: 24rpx;
            color: #999;
        }
        .list_styleTo_fix {
            border-bottom: 1rpx solid #e6e6e6;
            padding: 30rpx 0;
            display: flex;
            .list_styleTo_sum {
                margin-left: auto;
            }
        }
    }
    .user {
        padding: 20rpx;
    }
    .ord_site {
        background: #fff;
        margin-top: 20rpx;
        padding: 20rpx;
        overflow: hidden;

        .ord_site_list {
            border: 2px solid red;
            border-image: url();
            border-image-repeat: repeat;
            border-image-slice: 5;
            padding: 20rpx;
            > view {
                overflow: hidden;
                color: #333;
            }
            .ord_site_h4 {
                font-size: 34rpx;
                color: #000;
                padding-bottom: 10rpx;
            }
            .ord_site_p {
                font-size: 26rpx;
                color: #999;
            }
        }

        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
    }
    .shareColor {
        color: #0c90f5;
    }
    .userProtocol {
        color: #ffb025;
        padding-left: 20rpx;
    }
    .useDiscounts {
        padding: 20rpx;
        .useDiscounts_one {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_one_text {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_to {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_to_text {
            display: inline-block;
            vertical-align: middle;
        }
    }
}
</style>
